import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { NextRouter, useRouter } from 'next/router';
import * as React from 'react';
import { useCallback } from 'react';

import Routes from '../../constants/routes';
import { outlinedStyle } from '../shared/button/gfs-button';

const menu = (router: NextRouter) => [
    {
        name: 'Request',
        icon: 'dashboard',
        path: Routes.HOME,
        props: {
            onClick: () => router.push(Routes.HOME)
        }
    },
    {
        name: 'Approved',
        icon: 'payroll',
        props: {
            onClick: () => router.push(Routes.APPROVED)
        }
    },
    {
        name: 'Denied',
        icon: 'box',
        props: {
            onClick: () => router.push(Routes.DENIED)
        }
    }
];

export default function Sidebar({ open }) {
    const router = useRouter();

    const getIcon = (name) => {
        return '/' + name + '.svg';
    };

    const isActive = useCallback((menu) => {
        if (router.route === Routes.HOME) {
            return menu === router.route;
        }
        return menu && menu !== Routes.HOME && router.route.includes(menu);
    }, []);

    return (
        <>
            <List>
                {menu(router).map(({ name, icon, props, path }) => (
                    <ListItemButton
                        key={name}
                        sx={{
                            minHeight: 50,
                            justifyContent: open ? 'initial' : 'center',
                            px: 2.5,
                            borderRadius: '11px',
                            cursor: 'pointer',
                            marginTop: '20px',
                            marginBottom: '20px',
                            '& .MuiTypography-h6': {
                                fontWeight: '700'
                            },
                            '&:hover': isActive(path)
                                ? { ...outlinedStyle }
                                : {
                                      background:
                                          'linear-gradient(90deg, #0CD3E3 -1.18%, #FF007A 97.17%)'
                                  },
                            background: isActive(path)
                                ? 'linear-gradient(90deg, #0CD3E3 -1.18%, #FF007A 97.17%)'
                                : 'none'
                        }}
                        {...props}
                    >
                        <ListItemIcon
                            sx={{
                                minWidth: 0,
                                mr: open ? 3 : 'auto',
                                justifyContent: 'center'
                            }}
                        >
                            <Box
                                component="img"
                                sx={{
                                    height: 24,
                                    width: 24
                                }}
                                alt="Icon"
                                src={getIcon(icon)}
                            />
                        </ListItemIcon>
                        <ListItemText primary={name} sx={{ opacity: open ? 1 : 0 }} />
                    </ListItemButton>
                ))}
            </List>
            <Box
                sx={{
                    '&:hover': {
                        cursor: 'pointer'
                    },
                    pl: 3,
                    pb: 5,
                    position: 'fixed',
                    bottom: 0
                }}
            ></Box>
        </>
    );
}
